<template>
  <div class="tabbar">
    <div @click="jump('article')" class="tab">
      <image v-if="tab === 'article'" class="img" src="https://www.rrjiaoyi.com/app/tabbar/article-active.png"></image>
      <image v-else class="img" src="https://www.rrjiaoyi.com/app/tabbar/article.png"></image>
      <text :class="[tab === 'article' ? 'item-selected' : 'item']">热文</text>
    </div>
    <div @click="jump('games')" class="tab">
      <image v-if="tab === 'games'" class="img" src="https://www.rrjiaoyi.com/app/tabbar/game-active.png"></image>
      <image v-else class="img" src="https://www.rrjiaoyi.com/app/tabbar/game.png"></image>
      <text :class="[tab === 'games' ? 'item-selected' : 'item']">游戏</text>
    </div>
    <div @click="jump('recommend')" class="tab">
      <image v-if="tab === 'recommend'" class="img" src="https://www.rrjiaoyi.com/app/tabbar/home-active.png"></image>
      <image v-else class="img" src="https://www.rrjiaoyi.com/app/tabbar/home.png"></image>
      <text :class="[tab === 'recommend' ? 'item-selected' : 'item']">推荐</text>
    </div>
  </div>
</template>
<style scoped>
  .tabbar {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    width: 750px;
    height: 100px;
    line-height: 100px;
    bottom: 0;
    z-index: 99;
  }
  .tab{
    flex: 1;
    flex-direction: column;
    /* justify-content: space-around; */
    justify-content: center;
    align-items: center;
  }
  .img{
    width:44px;
    height:44px;
    margin-top: 15px
  }
  .item-selected{
    text-align: center;
    color: rgb(234, 162, 0);
    font-size: 25px;
    margin: 10px;
  }
  .item{
    text-align: center;
    color: rgb(89, 58, 37);
    font-size: 25px;
    margin: 10px;
  }
</style>
<script>
export default {
  props: {
    tabbara: String,
    required: true
  },
  data() {
    return {
      tab: ''
    }
  },
  methods: {
    jump(tab) {
      this.tab = tab
      switch (tab)
      {
      case 'article':
        this.tab = 'article'
        // this.$router.push('/index')
        break;
      case 'games':
        this.tab = 'games'
        // this.$router.push('/games')
        break;
      case 'recommend':
        this.tab = 'recommend'
        // this.$router.push('/recommend')
        break;        
      }
    }
  }
}
</script>